@import './_var.scss';

.base-btn {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 30px;
  border-radius: 4px;
  transition: all .1s;
  &.block {
    display: block;
    width: 100%;
  }
  &.block + &.block {
    margin-top: 10px;
  }
}
.btn {
  @extend .base-btn;
  &[disabled] {
    background: $bg-disabled;
    color: $color-disabled;
    cursor: not-allowed;
  }
  &.default {
    color: $btn-color-default;
    background-color: #fafafa;
    border: 1px solid #ececec;
  }
  &.main {
    color: $color-white;
    background: $color-main;
  }
  &.upload {
    background: $btn-bg-upload;
    color: $color-white;
  }
  &.option {
    background-color: $color-white;
    color: #313131;
    border: 1px solid #313131;
    // margin-left: 30px;
  }
  &.colse {
    background-color: $color-white;
    color: #979797;
    border: 1px solid #979797;
    margin-left: 30px;
  }
}
.btn-ghost {
  @extend .base-btn;
  background: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  &[disabled] {
    border-color: $bg-disabled;
    color: $color-disabled;
    cursor: not-allowed;
  }
  &.default {
    color: $btn-color-default;
    border-color: $color-btn-ghost-bd;
  }
  &.main {
    color: $color-main;
    border-color: $color-main;
  }
}
.btn-group {
  font-size: 0;
  margin-bottom: 10px;
  button {
    margin-right: 10px;
    &:last-of-type {
      margin-right: 0;
    }
  }
}
.btn-add {
  background-color: #F20685;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px;
  width: 150px;
  height: 30px;
}
.btn-cancel {
  background-color: #CCCCCC;
  border-radius: 4px;
  color: #FFFFFF;
  width: 90px;
  height: 30px;
  text-align: center;
}
.btn-save {
  background-color: #F20685;
  border-radius: 4px;
  color: #FFFFFF;
  width: 90px;
  height: 30px;
  text-align: center;
}